<template>    
    <div class="large-page">
        <div id="map"></div>
    </div>
  </template>

<script>
export default {
    name:'MyGISMap',
    components: {
    },
    props: {
    //   mapCtrlTools:{
    //     type:Array,
    //     default:function () {
    //       return []
    //     }
    //   },
    },
    data () {
        return {
          /**地图各悬浮面板的可视状态**/
          lyrPanelVisible:true,  //默认true为隐藏
        }
    },
    methods:{
    //   togglePanel(attr,attr2){
    //     this[attr] = !this[attr];
    //     this[attr2] = !this[attr2];
    //   },

      mapOnLoad(){
            var map = L.map('map', {
                //crs: L.CRS.EPSG4326,
                zoomControl: false,
                center: [35, 105],
                zoom: 7,
            });

            L.KqGIS.tiandituTileLayer({ layerType: 'vec' }).addTo(map);

            let jingjinUrl = 'http://support.kqgeo.com:29800/jingjin3857-proxy/kqgis/rest/services/jingjin3857/map';
            // 加载china地图
            L.KqGIS.tileMapLayer(jingjinUrl, {}).addTo(map);

            //let figure_spot_1 = "http://gis24.jlu3s.com:8699/kqgis/rest/services/figure_spot_1/map";
            // 加载china地图
            //L.KqGIS.tileMapLayer(figure_spot_1, {}).addTo(map);

            let CXLRFDB2007 = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007CXLRFDB/map";
            L.KqGIS.tileMapLayer(CXLRFDB2007, {}).addTo(map);

      }

    },
    created(){
      //region 地图左上角-功能启动图标按钮-初始化控制
    //   if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
    //     this.mapCtrlTools.forEach(item=>{
    //       if(item === 1){
    //         this.layerShow = true; //图层控制-功能启动图标按钮
    //       }else if(item === 2){
    //         this.measureShow = true; //测量工具-功能启动图标按钮
    //       }else if(item === 3){
    //         this.decorateShow = true; //地图整饰-功能启动图标按钮
    //       }
    //       else if(item === 4){
    //         this.attrQueryPanelShow = true; //属性查询-功能启动图标按钮
    //       }else if(item === 5){
    //         this.geometryQueryPanelShow = true; //几何空间查询-功能启动图标按钮
    //       }
    //       else if(item === 6){
    //         this.bufferAnalystPanelShow = true; //缓冲区分析-功能启动图标按钮
    //       }
    //       else if(item === 7){
    //         this.heatMapAnalystPanelShow = true; //热力图分析-功能启动图标按钮
    //       }
    //       else if(item === 8){
    //         this.clusterLayerPanelShow = true; //聚类图-功能启动图标按钮
    //       }
    //       else if(item === 9){
    //         this.thiessenAnalystPanelShow = true; // (数据集)泰森多边形分析-功能启动图标按钮
    //       }
    //     });
    //  }
    //endregion
    },
    mounted(){
      /*地图初始化*/
      //this.initMyMap();
      /*让地图中的某些面板可拖动*/
      //this.dragFunc(this.lyrBox);
      //this.dragFunc("sxcx"); //属性查询面板-可拖动
      //this.dragFunc("jhcx"); //几何分析面板-可拖动
      //this.dragFunc("hcqfx"); //缓冲区分析面板-可拖动
      //this.dragFunc("rlt"); //热力图面板-可拖动
      //this.dragFunc("jlt"); //聚类图面板-可拖动
      //this.dragFunc("tsdbx"); //泰森多边形分析面板-可拖动
      this.mapOnLoad();
    },
    watch:{},
    computed:{
    //   lyrBox: function () {
    //     return 'lyrBoxDiv' + new Date().valueOf()
    //   }
    }        
}      

</script>

<style scoped>
/* .login-main {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/login-bg.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
} */
 .large-page {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 #map {
    /* position: inherit; */
    /* width: calc( 100vw - 120px );
    height: calc( 100vh - 50px ); */
    width: 100%;
    height: 100%;
    background-color: rgb(40, 230, 230);
 }
</style>
